<template>
	<BasePopup
		v-model="appStore.languageShow"
		titleT="app.language"
		titleIcon="language"
		@close="handleCloseModal">
		<div class="modal-body flex flex-col gap-[6px]">
			<div
				class="flex justify-between items-center p-3 app-bg-react rounded-lg cursor-pointer"
				:class="selectedLang === item.id ? 'bg-primary' : ''"
				@click="handleLang(item)"
				v-for="(item, index) in langList"
				:key="index">
				<div>{{ item.text }}</div>
				<div class="lang-bullet__outside" :class="selectedLang === item.id ? 'active' : ''">
					<div class="lang-bullet__inner"></div>
				</div>
			</div>
			<BaseButton class="mt-10" type="primary" textT="action.confirm" @click="onSubmit" />
		</div>
	</BasePopup>
</template>

<script setup lang="ts">
import { BasePopup, BaseButton } from '@/components/base'
import { useAppStore } from '@/store'
import { ref } from 'vue'
import { getLangList } from '@/utils'
const appStore = useAppStore()

const langList = getLangList()
const selectedLang = ref(appStore.lang)

const handleLang = (item: any) => {
	selectedLang.value = item.id
}
const onSubmit = () => {
	appStore.showLanguage(false)
	appStore.setLang(selectedLang.value)
}
const handleCloseModal = () => {
	selectedLang.value = appStore.lang
}
</script>
<style scoped>
.lang-bullet__outside {
	width: 20px;
	height: 20px;
	border-radius: 100%;
	position: relative;
	border: 2px solid var(--color-bg-10);
}
.lang-bullet__outside.active {
	border-color: var(--color-bg-6);
}
.lang-bullet__inner {
	width: 10px;
	height: 10px;
	background: white;
	border-radius: 100%;
	position: absolute;
	top: 3px;
	left: 3px;
	transform: scale(0);
	transition: all 0.3s;
}
.active .lang-bullet__inner {
	transform: scale(1);
}
</style>
import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
